<template>
<!--address_list.wxml-->
<!-- <view class="container">
    <view class="address-box" wx:for="{{addresses}}" wx:key="{{index}}">
        <view class="address-user">
            <view class="user-name">{{item.consignee}}</view>
            <text class="default" wx:if="{{item.is_default}}">默认</text>
        </view>
        <view class="address-info"  bindtap="selectAddress" data-item="{{item}}">
            <view class="mobile">电话：{{item.mobile}}</view>
            <view class="address">{{item.province_name}} {{item.city_name}} {{item.district_name}} {{item.twon_name?item.twon_name:''}} {{item.address}}</view>
        </view>
        <view class="address-edit" bindtap="editAddress" data-id="{{item.address_id}}">
            <image src="../../../images/address_edit.png"></image>
        </view>
    </view>
    <navigator class="address-create" url="/pages/user/add_address/add_address">
        <view class="create-btn">+新建地址</view>
    </navigator>
</view> -->

<!--address_list.wxml-->
<view class="container">
    <view v-for="(item, index) in addresses" :key="index" class="address-box">
      <view @tap.stop="selectAddress" :data-item="item" class="topbox">
        <view class="address-user">
            <view class="user-name">{{item.consignee}}</view>
            <!-- <text class="default" wx:if="{{item.is_default}}">默认</text> -->
        </view>
        <view class="address-info">
            <view class="mobile">{{item.mobile}}</view>
        </view>
        <view class="address">{{item.province_name}} {{item.city_name}} {{item.district_name}} {{item.twon_name}} {{item.address}}             </view>
        <!-- <view class="address-edit" bindtap="editAddress" data-id="{{item.address_id}}">
            <image src="../../../images/address_edit.png"></image>
        </view> -->
      </view>
      <view class="footbox">
        <view class="leftbox">
          <view @tap="setDefault" :data-obj="item" class="choosebox">
            <image v-if="item.is_default" src="/static/images/ischeck.png"></image>
            <image v-if="!item.is_default" src="/static/images/nocheck.png"></image>
          </view>设为默认
        </view>
        <view @tap="editAddress" :data-id="item.address_id" class="rightbox">
            <image class="editimg" src="/static/images/address_edit.png"></image>
            编辑
        </view>
      </view>
    </view>
    <navigator class="address-create" url="/pages/user/add_address/add_address">
        <view class="create-btn">+新建地址</view>
    </navigator>
</view>
</template>

<script>
var app = getApp();
var request = require("../../../utils/request.js");

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      addresses: null,
      //请求的地址列表
      operate: null //操作类型，select：订单选择地址操作，其他：普通展示

    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    this.operate = options.operate;
  },
  onShow: function () {
    this.requestAddressList();
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.requestAddressList();
  },
  methods: {
    /** 请求地址列表数据 */
    requestAddressList: function () {
      var that = this;
      request.get(that.url + '/api/user/ajaxAddressList', {
        success: function (res) {
          that.setData({
            addresses: res.data.result
          });
          uni.stopPullDownRefresh();
        }
      });
    },

    /** 修改地址 */
    editAddress: function (e) {
      var address = this.getAddressData(e.currentTarget.dataset.id);
      var params = '';

      for (var item in address) {
        params += (params.length != 0 ? '&' : '?') + (item + '=' + address[item]);
      }

      params && uni.navigateTo({
        url: "/pages/user/add_address/add_address" + params
      });
    },

    /** 填写订单(商品详情)的时候可触发选择地址 */
    selectAddress: function (e) {
      var data = {};
      var item = e.currentTarget.dataset.item;
      data.consignee = item.consignee;
      data.mobile = item.mobile;
      data.province_name = item.province_name;
      data.province = item.province;
      data.city_name = item.city_name;
      data.city = item.city;
      data.district_name = item.district_name;
      data.twon_name = item.twon_name;
      data.address = item.address;
      data.address_id = item.address_id;
      data.district = item.district;
      data.latitude = item.latitude;
      data.longitude = item.longitude;

      if (this.operate == null) {
        return;
      }

      if (this.operate == 'select') {
        //更新订单页的地址           
        uni.setStorageSync('cart:cart2:address', data);
      } else if (this.operate == 'teamSelect') {
        //更新拼团订单页的地址
        uni.setStorageSync('team:confirm:address', data);
      } else if (this.operate == 'selectAddress') {
        //更新商品详情的配送地
        var totalAddress = item.province_name + item.city_name + item.district_name;
        data.address2 = totalAddress;
        uni.setStorageSync('goodsInfo:goodsInfo:address', data);
      } else if (this.operate == 'take') {
        //更新商品详情的配送地
        var totalAddress = item.province_name + item.city_name + item.district_name; // data.address2 = totalAddress;

        uni.setStorageSync('take:take:address', data);
      }

      uni.navigateBack();
    },

    /** 由addressId获取地址数据 */
    getAddressData: function (addressId) {
      var addresses = this.addresses;

      for (var idx in addresses) {
        if (addresses[idx].address_id == addressId) {
          break;
        }
      }

      if (!idx) {
        return {};
      }

      return addresses[idx];
    },
    setDefault: function (e) {
      var that = this;
      var address = e.currentTarget.dataset.obj;
      var id = address.address_id;
      address.is_default = !address.is_default;
      var is_default = address.is_default;
      address.is_default = Number(address.is_default);
      request.post('/api/user/addAddress', {
        data: address,
        success: function (res) {
          that.addresses.forEach(function (item, index) {
            item.is_default = 0;
          });
          that.addresses.forEach(function (item, index) {
            if (item.address_id == id) {
              item.is_default = is_default;
            }
          });
          that.setData({
            addresses: that.addresses
          });
        }
      });
    }
  }
};
</script>
<style>
/* address_list.wxss */
page{
    margin-bottom: 200rpx;
}
.address-box{
    background-color: white;
    padding: 25rpx 25rpx 25rpx 25rpx;
    font-size: 28rpx;
    border-bottom: 3rpx solid #f3f3f3;
    width: 710rpx;
    border-radius: 10rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    box-sizing: border-box;
}
.address-box .topbox{
  width: 100%;
  border-bottom: 1rpx solid #f3f3f3;
  height: 120rpx;
}
.address-box .footbox{
  width: 100%;
  height: 60rpx;
  line-height: 80rpx;
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
}
.choosebox{
  vertical-align: middle;
  margin-right: 10rpx;
}
.address-box .footbox .leftbox{
  height: 100%;
  width: 200rpx;
}
.address-box .footbox .rightbox{
  height: 100%;
  width: 120rpx;
  text-align: right;
}
.editimg{
  width: 32rpx;
  height: 34rpx;
  vertical-align: middle;
  position: relative;
  top: -2rpx;
}
.address-user{
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;

}
.user-name{
    font-size: 30rpx;
    padding-bottom: 20rpx;
    word-break:keep-all;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
    max-width: 380rpx;
}
.default{
    color: white;
    background-color: red;
    padding: 4rpx;
    width:fit-content;
    border-radius:6rpx;
}
.address-info{
    box-sizing: border-box;
    padding-left: 10rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}
.mobile{
    padding-bottom: 20rpx;
}
.address{
    height: 50rpx;
    overflow: hidden;
    font-size: 24rpx;
    color: #999;
    width: 100%;
    line-height: 50rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.address-edit{
    box-sizing: border-box;
    width:95rpx;
    float: left;
    text-align: center;
    padding-top: 32rpx;
}
.address-edit>image{
    width: 36rpx;
    height: 42rpx;
}
.address-create{
    width: 50%;
    text-align: center;
    position: fixed;
    bottom: 80rpx;
    left: 25%;
}
.create-btn{
    font-size: 28rpx;
    color: white;
    background-color: #ff6a00;
    border-radius: 10rpx;
    text-align: center;
    line-height: 80rpx;
    display: block;
}
.choosebox{
    width: 32rpx;
    height: 32rpx;
    position: relative;
    top: -2rpx;
}
</style>